<template>
    <div class="topbar-warp">
        <div class="left">
            <div class="icon" v-if="isIcon" @click="onLeft">
                <i class="iconfont icon-aliyu"></i>
            </div>
            <div class="avatar" v-else>
                <img :src="avatar">
            </div>
            <div class="name" v-if="!isIcon">
                <span>{{name}}</span>
            </div>
        </div>
        <div class="center">
            <div class="text">{{text}}</div>
        </div>
        <div class="right">
            <div class="icon" @click="onRight">
                <i class="iconfont" :class="`icon-${rightIcon}`"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TopbarWarp',
    props: {
        isIcon: {
            type: Boolean,
            default: false
        },
        avatar: {
            type: String
        },
        name: {
            type: String
        },
        text: {
            type: String
        },
        rightIcon: {
            type: String,
            default: 'zengjia'
        }
    },
    methods: {
        onLeft() {
            this.$emit('onLeft')
        },
        onRight() {
            this.$emit('onRight')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.topbar-warp{
    position: fixed;
    z-index:2;
    top:0;
    left:0;
    right:0;
    height:3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0.5rem 0.625rem;
    @include background_color("background_color4");
    .left{
        display: flex;
        align-items: center;
        @include font_color("font_color8");
        .avatar{
            width:1.875rem;
            height:1.875rem;
            img{
                width:100%;
                height:100%;
                border-radius:100%;
                display: block;
                object-fit: cover;
            }
        }
        .name{
            font-size:0.875rem;
            margin-left:0.625rem;
            @include font_color("font_color7");
        }
        .icon{
            width:4.25rem;
            height:2.5rem;
            line-height:2.5rem;
            .iconfont{
                font-size:1.375rem;
            }
        }
    }
    .center{
        @include font_color("font_color7");
        letter-spacing:0.0625rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .right{
        @include font_color("font_color8");
        .icon{
            width:4.25rem;
            height:2.5rem;
            line-height:2.5rem;
            text-align: right;
            .iconfont{
                font-size:1.375rem;
            }
        }
    }
}
</style>